<template>
  <div class="tree">
    <div class="tree-head flex-center-center">{{ $t("tree.page") }}</div>
    <div class="all-expand" @click="handleAllExpand">
      {{ isCollapsed ? $t("tree.expandAll") : $t("tree.collapseAll") }}
    </div>
    <div class="tree-body">
      <VueGiantTree ref="zTreeEl" :nodes="nodes" :setting="setting" />
    </div>
  </div>
</template>
<script>
import VueGiantTree from "vue-giant-tree";
import { mapActions, mapState } from "vuex";
import setPageConfig from "@/util/pageConfig";

export default {
  components: {
    VueGiantTree,
  },
  computed: {
    ...mapState({
      page: (state) => state.page,
    }),
    ...mapState(["isDev"]),
  },
  data() {
    return {
      isCollapsed: true,
      nodes: [],
      setting: {
        data: {
          simpleData: { enable: true, idKey: "id", pIdKey: "pid", rootPId: "" },
        },
        view: { nameIsHTML: true, showIcon: true },
        callback: {
          onNodeCreated: (event, treeId, treeNode) => {
            // 处理完给到展示用
            const title =  treeNode.name + (treeNode.userCode ? `[${treeNode.userCode}]` :'')
            if (treeNode.total) {
              if (treeNode?.showOnlyTotal) {
                treeNode.name = `${title}(${treeNode.total})`;
              } else {
                treeNode.name = `${title}(${treeNode.total}/${treeNode.del})`;
              }
            }
            this.$refs.zTreeEl.ztreeObj.updateNode(treeNode);
          },
          onClick: (e, id, node) => {
            const nodeConfigRecursion = (node) => {
              if (node.id === "0") {
                return node;
              } else if (node.children && node.children.length > 0) {
                return nodeConfigRecursion(node.children[0]);
              } else {
                return node;
              }
            };
            const currentNode = nodeConfigRecursion(node);
            window.localStorage.setItem(
              "selectNode",
              JSON.stringify(currentNode)
            );
            this.setJsonName(currentNode.dataConfig.jsonName);
            this.$emit("setDataConfig", currentNode);
          },
        },
      },
    };
  },
  async mounted() {
    let res = await this.$getJson("./json/tree.txt", "tree");
    this.$set(this, "nodes", Object.freeze(res));
    // 根据数节点统计好每一页的json文件
    setPageConfig(res);

    const currenNode = JSON.parse(window.localStorage.getItem("selectNode"));
    // 回显上一次点击的节点
    if (this.isDev && window.localStorage.getItem("selectNode")) {
      const node = this.$refs.zTreeEl.ztreeObj.getNodeByParam(
        "id",
        currenNode.id
      );
      this.$refs.zTreeEl.ztreeObj.selectNode(node);
      this.$emit("setDataConfig", currenNode);
    } else {
      this.$refs.zTreeEl.ztreeObj.selectNode(res[0]);
      this.$emit("setDataConfig", res[0]);
    }
    res = null;
  },

  methods: {
    ...mapActions("page", ["setJsonName"]),
    handleAllExpand() {
      this.$refs.zTreeEl.ztreeObj.expandAll(this.isCollapsed);
      this.isCollapsed = !this.isCollapsed;
    },
    // handleAllCollapse() {
    //   this.$refs.zTreeEl.ztreeObj.expandAll(false);
    // },
  },
};
</script>

<style lang="scss" scoped>
.tree {
  height: 100%;
}

.tree-head {
  background-color: #f1f2f3;
  height: 36px;
  font-size: 18px;
  color: #666666;
}

.tree-body {
  overflow: auto;
  padding-left: 18px;
  height: calc(100% - (36px + 44px));
  .ztree.vue-giant-tree {
    font-size: 16px;
  }
}

.all-expand,
.all-collapse {
  padding: 8px 8px 8px 18px;
  cursor: pointer;
  color: #0891b4;

  &:hover {
    color: #09a2c9;
  }

  &:active {
    color: #057c9a;
  }
}

.vue-giant-tree::v-deep {
  ul {
    padding-left: 18px;
  }

  .curSelectedNode {
    span.node_name {
      background-color: #e7f5fb;
    }
  }

  .button {
    &.ico_close,
    &.ico_open,
    &.ico_docu {
      background-size: 16px 16px !important;
    }

    &.switch::before {
      border-color: transparent transparent transparent #0891b4;
    }
  }
}
</style>
